<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>菜单管理-添加菜单</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" th:href="@{/layuimini/lib/layui-v2.6.3/css/layui.css}" media="all">
    <link rel="stylesheet" th:href="@{/layuimini/css/layuimini.css}" media="all">
    <link rel="stylesheet" th:href="@{/layuimini/css/public.css}" media="all">
    <link rel="stylesheet" th:href="@{/layuimini/lib/font-awesome-4.7.0/css/font-awesome.min.css}" media="all">
</head>
<body>
<div class="layuimini-container">
    <div class="layuimini-main">
        <div class="layui-form layuimini-form layui-form-pane" action="" lay-filter="menuForm">
            <input name="menuId" type="hidden" th:value="${sysMenu?.menuId}"/>
            <div class="layui-form-item" pane>
                <label class="layui-form-label required">菜单类型</label>
                <div class="layui-input-block">
                    <input type="radio" name="menuType" value="0" title="模块" th:attr="checked=${sysMenu?.menuType == 0 ? true : false}" lay-filter="menuType">
                    <input type="radio" name="menuType" value="1" title='目录' th:attr="checked=${sysMenu?.menuType == 1 ? true : false}" lay-filter="menuType">
                    <input type="radio" name="menuType" value="2" title='菜单' th:attr="checked=${sysMenu?.menuType == 2||sysMenu == null ? true : false}" lay-filter="menuType">
                    <input type="radio" name="menuType" value="3" title="按钮" th:attr="checked=${sysMenu?.menuType == 3 ? true : false}" lay-filter="menuType">
                </div>
            </div>
            <div class="layui-form-item" id="pidDiv">
                <label class="layui-form-label required" id="pidLabel">所属目录</label>
                <div class="layui-input-block">
                    <div id="pid" name="pid" class="xm-select-demo"></div>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label required" id="menuNameLabel">菜单名称</label>
                <div class="layui-input-block">
                    <input type="text" id= "menuName" name="menuName" placeholder="请输入菜单名称[必填]" th:value="${sysMenu?.menuName}" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item" id="iconDiv">
                <label class="layui-form-label required" id="menuIconLabel">菜单图标</label>
                <div class="layui-input-block">
                    <input type="text" id="iconPicker" class="layui-input hide" placeholder="请选择菜单图标" th:value="${sysMenu?.menuIcon}" lay-filter="iconPicker">
                    <input type="text" id="menuIcon" name="menuIcon" placeholder="请输入菜单图标" th:value="${sysMenu?.menuIcon}" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item" id="menuUrlDiv">
                <label class="layui-form-label required">菜单url</label>
                <div class="layui-input-block">
                    <input type="text" name="menuUrl" placeholder="请输入菜单url[必填]" th:value="${sysMenu?.menuUrl}" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item" id="menuAuthDiv">
                <label class="layui-form-label required">权限标识</label>
                <div class="layui-input-block">
                    <input type="text" name="menuAuth" placeholder="请输入权限标识" th:value="${sysMenu?.menuAuth}" class="layui-input">
                    <tip>权限标识作为唯一标识，请输入全英文</tip>
                </div>
            </div>
            <div class="layui-form-item" id="menuTargetDiv">
                <label class="layui-form-label">打开方式</label>
                <div class="layui-input-block">
                    <select id="menuTarget" name="menuTarget" lay-verify="required" lay-reqtext="请选择打开方式">
                        <option value="_self"  th:attr="selected=${sysMenu?.menuTarget == '_self'||sysMenu == null  ? true : false}">内嵌</option>
                        <option value="_blank" th:attr="selected=${sysMenu?.menuTarget == '_blank' ? true : false}">外链</option>
                    </select>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label required">排序码</label>
                <div class="layui-input-block">
                    <input type="number" min="0" name="menuSort" placeholder="请输入排序码" th:value="${sysMenu != null ? sysMenu.menuSort : '1'}" lay-verify="required" lay-reqtext="请输入排序码" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item" id="menuDescDiv">
                <label class="layui-form-label" id="menuDescLabel">菜单描述</label>
                <div class="layui-input-block">
                    <textarea id="menuDesc" name="menuDesc" placeholder="请输入菜单描述" th:value="${sysMenu?.menuDesc}" class="layui-textarea" style="resize: none"></textarea>
                </div>
            </div>
            <div class="layui-form-item" id="menuBtnDiv" pane>
                <label class="layui-form-label">按钮菜单</label>
                <div class="layui-input-block">
                    <div id="menuBtn">
                        <input type="checkbox" id="show" value="1" title="查看">
                        <input type="checkbox" id="add" value="1" title="新增">
                        <input type="checkbox" id="edit" value="1" title="编辑">
                        <input type="checkbox" id="del" value="1" title="删除">
                        <input type="checkbox" id="status" value="1" title="禁/启用">
                        <input type="checkbox" id="export" value="1" title="导出">
                    </div>
                    <tip>同时一键生成增删改查的按钮权限</tip>
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-input-block">
                    <button class="layui-btn layui-btn-normal" lay-submit lay-filter="saveBtn">保存</button>
                </div>
            </div>
        </div>
    </div>
</div>

<script th:src="@{/layuimini/lib/layui-v2.6.3/layui.js}" charset="UTF-8"></script>
<script th:src="@{/layuimini/js/lay-config.js?v=1.0.4}" charset="UTF-8"></script>
<script type="text/javascript" th:inline="javascript">
    layui.use(['form','iconPickerFa','xmSelect','notice'], function () {
        let form = layui.form,
            iconPickerFa = layui.iconPickerFa,
            xmSelect = layui.xmSelect,
            notice = layui.notice,
            $ = layui.jquery;

        let ctxPath = /*[[@{/}]]*/'';

        //1.打开时渲染表单
        let editFlag = [[${sysMenu?.menuId}]] != null ? true : false;
        if(editFlag){
            $('input[name^="menuType"]').attr("disabled", true);    //修改时设置菜单类型不允许改
            renderForm([[${sysMenu?.menuType}]]+'');                //修改时根据类型进行渲染
        }else {
            renderForm('2');                                        //打开时默认菜单，进行渲染
        }

        //2.选择菜单类型时重新渲染表单
        form.on('radio(menuType)', function (data){
            renderForm(data.value);
        });

        //动态渲染表单
        function renderForm(value){
            $("#menuBtn:checkbox").attr("checked", false);              //设置菜单按钮不选中(需要重新渲染表单)
            $('#menuBtnDiv').hide();                                    //设置隐藏按钮菜单
            switch (value) {
                case '0':               //模块
                    $('#pidDiv').hide();            //隐藏上级菜单
                    $('#pid input').removeAttr('lay-verify').removeAttr('lay-reqtext');
                    $('#menuNameLabel').text('模块名称');
                    $('#menuName').attr({'lay-reqtext': '请输入模块名称','placeholder': '请输入模块名称[必填]'});
                    $('#iconDiv').show();           //显示菜单图标
                    $('#menuIconLabel').text('目录图标');
                    $('#menuIcon').attr('placeholder','请输入目录图标');
                    $('#menuUrlDiv').hide();        //隐藏菜单URL
                    $('#menuUrl').val('');          //重置菜单URL
                    $('#menuAuthDiv').hide();       //隐藏权限标识
                    $('#menuAuth').val('');         //重置权限标识
                    $('#menuTargetDiv').show();     //显示打开方式
                    $('#menuDescDiv').show();       //显示菜单描述
                    $('#menuDescLabel').text('模块描述');
                    $('#menuDesc').attr('placeholder','模块描述');
                    break;
                case '1':               //目录(一级菜单)
                    $('#pidDiv').show();           //显示上级菜单
                    $('#pidLabel').text('所属模块');
                    renderParentMenuSelect('0');
                    $('#menuNameLabel').text('目录名称');
                    $('#menuName').attr({'lay-reqtext': '请输入目录名称','placeholder': '请输入目录名称[必填]'});
                    $('#iconDiv').show();           //显示菜单图标
                    $('#menuIconLabel').text('目录图标');
                    $('#menuIcon').attr('placeholder','请输入目录图标');
                    $('#menuUrlDiv').hide();        //隐藏菜单URL
                    $('#menuUrl').val('');          //重置菜单URL
                    $('#menuAuthDiv').show();       //显示权限标识
                    $('#menuTargetDiv').show();     //显示打开方式
                    $('#menuDescDiv').show();       //显示菜单描述
                    $('#menuDescLabel').text('目录描述');
                    $('#menuDesc').attr('placeholder','目录描述');
                    break;
                case '2':               //菜单(二级菜单）
                    $('#pidDiv').show();           //显示上级菜单
                    $('#pidLabel').text('所属目录');
                    renderParentMenuSelect('1');
                    $('#menuNameLabel').text('菜单名称');
                    $('#menuName').attr({'lay-reqtext': '请输入菜单名称','placeholder': '请输入菜单名称[必填]'});
                    $('#iconDiv').show();           //显示菜单图标
                    $('#menuIconLabel').text('菜单图标');
                    $('#menuIcon').attr('placeholder','请输入菜单图标');
                    $('#menuUrlDiv').show();        //显示菜单URL
                    $('#menuUrl').attr({'lay-verify': 'required','lay-reqtext': '请输入菜单URL[必填]'});
                    $('#menuAuthDiv').show();       //显示权限标识
                    $('#menuTargetDiv').show();     //显示打开方式
                    $('#menuDescDiv').show();       //显示菜单描述
                    $('#menuDescLabel').text('菜单描述');
                    $('#menuDesc').attr('placeholder','菜单描述');
                    if(!editFlag){
                        $('#menuBtnDiv').show();        //显示按钮菜单
                    }
                    break;
                case '3':               //按钮
                    $('#pidDiv').show();           //显示上级菜单
                    $('#pidLabel').text('所属菜单');
                    renderParentMenuSelect('2');
                    $('#menuNameLabel').text('按钮名称');
                    $('#menuName').attr({'lay-reqtext': '请输入按钮名称','placeholder': '请输入按钮名称[必填]'});
                    $('#iconDiv').hide();           //隐藏菜单图标
                    $('#menuIcon').val('');         //重置菜单图标
                    $('#menuUrlDiv').hide();        //隐藏菜单URL
                    $('#menuUrl').val('');          //重置菜单URL
                    $('#menuAuthDiv').show();       //显示权限标识
                    $('#menuTargetDiv').hide();     //隐藏打开方式
                    $('#menuDescDiv').hide();       //隐藏菜单描述
                    $('#menuDesc').val('');         //重置菜单描述
                    break;
            };
            form.render();                  //重新渲染表单
        }

        //动态加载下拉项
        function renderParentMenuSelect(type) {
            //上级菜单提示内容
            let pidReqtext = '请选择所属菜单';
            switch (type) {
                case '1':   pidReqtext = '请选择所属模块';   break;
                case '2':   pidReqtext = '请选择所属目录';   break;
                case '3':   pidReqtext = '请选择所属菜单' ;  break;
            }
            $.ajax({
                type:'GET',
                url:ctxPath+'system/sysMenu/parentMenuTree',
                data:{
                    'menuId':[[${sysMenu?.parentMenuId}]],
                    'menuType':type
                },
                dataType:'json',
                success:function (res){
                    if(res.code === 200){
                        xmSelect.render({
                            el: '#pid',
                            name:'parentMenuId',
                            radio: true,                    //开启单选
                            clickClose: true,               //单选完关闭下拉
                            filterable: true,               //开启搜索
                            iconfont: {parent: 'hidden'},
                            layVerify:'required',           //xmSelect必填属性
                            layReqText:pidReqtext,          //xmSelect必填提示属性
                            tree: {
                                show: true,                 //是否显示树状结构
                                showFolderIcon: true,       //是否展示三角图标
                                showLine: true,             //是否显示虚线
                                indent: 10,	                //间距
                                strict: true,               //是否严格遵守父子模式
                                clickExpand: true,          //点击节点是否展开
                                clickCheck: false,           //点击节点是否选中
                                expandedKeys: [ -1 ],
                            },
                            data: res.data,
                            theme:{
                                color:'#1E9FFF'
                            },
                        })
                    }
                }
            });
        }

        //图标选择器渲染
        iconPickerFa.render({
            elem: '#iconPicker',
            url: ctxPath + 'layuimini/lib/font-awesome-4.7.0/less/variables.less',
            search: true,
            page: true,         //是否开启分页
            limit: 20,          //每页显示数量，默认12
            click: function (data) {
                form.val('menuForm', {
                    'menuIcon': 'fa ' + data.icon
                });
            }
        });

        // 监听保存提交
        form.on('submit(saveBtn)', function (data) {
            //新增提交地址及参数
            let url = ctxPath+'system/sysMenu/saveMenu';
            let type = 'POST';
            let dataParam = JSON.stringify({
                'menuData': JSON.stringify(data.field),
                'menuBtn': JSON.stringify({
                    'show': $('#show:checked').val(),
                    'add': $('#add:checked').val(),
                    'edit': $('#edit:checked').val(),
                    'del': $('#del:checked').val(),
                    'status': $('#status:checked').val(),
                    'export': $('#export:checked').val()
                })
            });
            //编辑提交地址及参数
            if($("input[name='menuId']").val()){
                url = ctxPath+'system/sysMenu/updateMenu';
                dataParam = JSON.stringify(data.field);
                type = 'PUT';
            }

            $.ajax({
                type:type,
                url:url,
                data: dataParam,
                contentType: 'application/json;charset=utf-8;',
                dataType:'json',
                success:function (res){
                    if(res.code === 200){
                        notice.success('操作成功');
                        setTimeout(function() {
                            layer.closeAll('iframe');
                            parent.location.reload();
                        },1000);
                    }else{
                        notice.error(res.msg);
                    }
                }
            });
            return false;
        });
    });
</script>
</body>
</html>
